<template>
  <div class="rateQuery">

        <div style="width: 80%; margin: 20px auto">
        <a-row style="background: rgb(191 191 191); padding: 10px">
          <a-col :span="6"><div>功能名称</div>  </a-col>
          <a-col :span="12"><div style="padding-left:44px">费率</div>  </a-col>
        </a-row>
        <div v-for="(value, key, index) in ratelist" :key="index" class="rateTable">
          <div v-if="value != null && value.length > 1">
            <a-row>
              <a-col @click="clickPlus(index)" :span="6">
                <span>＋</span>
                {{ key }}
              </a-col>
              <a-col :span="13" @click="clickPlus(index)"><span>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&nbsp;</span> 点击展开 </a-col>
            </a-row>
            <a-row style="margin-top:15px" v-if="context[index].status">
              <a-col :span="24">
                <div v-for="(valItem, valIndex) in value" :key="valIndex">
                   <br>
                  <a-row>
                    <a-col :span="6">
                      {{ valItem.productName }}
                    </a-col>
                    <a-col :span="12">
                      <span>
                        <span>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&nbsp;</span>
                      <a-input-number
                          :step="0.01"
                          :precision="4"
                          v-model="value[valIndex].feeTemplate.rate"
                          style="width: 60%"
                          @blur="verifyValue(valItem.productName,value[valIndex].feeTemplate.rate,0)"
                        />
                      <span>%</span>
                       </span>
                        <br v-if="value[valIndex].feeTemplate.top || value[valIndex].feeTemplate.top == 0">
                      <span v-if="value[valIndex].feeTemplate.top || value[valIndex].feeTemplate.top == 0">
                        <span>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&nbsp;</span>
                        <a-input-number
                          :step="1"
                          :precision="2"
                          v-model="value[valIndex].feeTemplate.top"
                          style="width: 60%"
                          @blur="verifyValue(valItem.productName,value[valIndex].feeTemplate.top,0)"
                        />
                        
                          <!-- :min="value[valIndex].minFee.top"
                          :max="value[valIndex].maxFee.top" -->
                        <span>元封顶</span>
                      </span>
                    </a-col>
                    <a-col :span="6"> </a-col>
                  </a-row>
                </div>
              </a-col>
            </a-row>
          </div>
          <div v-if="value != null && value.length === 1">
            <a-row>
              <a-col :span="6">
                <div v-if="value != null && value.length > 1">+</div>
                {{ key }}
              </a-col>
              <a-col :span="18">
                <div v-for="(valItem, valIndex) in value" :key="valIndex">
                  <a-row>
                    <a-col :span="18">
                      <span>
                        <span v-if="valItem.name == 'D0'">D0垫资</span>
                        <span v-if="valItem.name != 'D0'">&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&nbsp;</span>
                      <a-input-number
                        :step="0.01"
                        :precision="4"
                        v-model="value[valIndex].feeTemplate.rate"
                        style="width: 60%"
                        @blur="verifyValue(valItem.productName,value[valIndex].feeTemplate.rate,0)"
                      />
                      <span>%</span>
                      </span>
                        <br v-if="value[valIndex].feeTemplate.top || value[valIndex].feeTemplate.top == 0">
                      <span v-if="value[valIndex].feeTemplate.top || value[valIndex].feeTemplate.top == 0">
                        <span>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&nbsp;</span>
                        <a-input-number
                          :step="1"
                          :precision="2"
                          v-model="value[valIndex].feeTemplate.top"
                          style="width: 60%"
                          @blur="verifyValue(valItem.productName,value[valIndex].feeTemplate.top,0)"
                        />
                        <span>元封顶</span>
                      </span>
                       <br v-if="valItem.name == 'D0'">
                      <span v-if="valItem.name == 'D0'">
                        <span>D0单笔</span>
                        <a-input-number
                          :step="1"
                          :precision="2"
                          v-model="value[valIndex].feeTemplate.amount"
                          :min="0"
                          style="width: 60%"
                        />
                        <span>元/笔</span>
                      </span>
                    </a-col>
                  </a-row>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>

      </div>
  </div>
</template>
<script>
export default {
  components: {
    
  },
  props: {
    MerRateList:Object
  },
  watch: {
    MerRateList: {
      deep: true,  // 深度监听
      handler(newVal,oldVal) {
        //  console.log(newVal,oldVal)
         if(newVal != oldVal){
           this.MerRateList = newVal
           this.setratelist();
         }
      }
    }
  },
  data() {
    return {
      ratelist: [],
      context: [],
      templateBankDTOList: [],
      feeTemplateList: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 },
          md: { span: 16 }
        }
      }
    };
  },
  mounted() {
    this.feeTemplateList = []
  },

  methods: {
    inputValue(index,value){
      console.log(value)
      if(value == "" || value == undefined){
        return 0
      }
    },
    verifyValue(name,value,min){
      if(value == "" || value == undefined){
        this.$message.error("请输入正确的数值")
      }
      if(value < 0){
        this.$message.info(name + "费率不得低于" + 0)
      }
      if(name == "pos借记"){
        if(value == 0){
        this.$message.info("pos借记卡不得为0元封顶")
        }
      }
    },
    clickPlus(index) {
      console.log(this.context[index].status);
      this.context[index].status = !this.context[index].status;
    },
    setratelist() {
            this.ratelist = this.MerRateList
            this.context= []

            for(let idx in this.ratelist){
              // console.log("ratelist.idx",this.ratelist[idx])
              if(this.ratelist[idx].length == 1){
                this.context.push({status: true})
              }else{
                this.context.push({status: false})
              }
              for(let idx2 in this.ratelist[idx]){
                this.ratelist[idx][idx2].feeTemplate = JSON.parse(this.ratelist[idx][idx2].feeTemplate);
                  //默认值
                  if (this.ratelist[idx][idx2].feeTemplate.rate != null) {
                    this.ratelist[idx][idx2].feeTemplate.rate = Math.round(this.ratelist[idx][idx2].feeTemplate.rate * 1000000) /
                      10000;
                    if (this.ratelist[idx][idx2].name == "D0") {
                      this.ratelist[idx][idx2].feeTemplate.amount = this.ratelist[idx][idx2].feeTemplate.amount / 100;
                    }
                    if (this.ratelist[idx][idx2].name == "pos借记") {
                      this.ratelist[idx][idx2].feeTemplate.top = this.ratelist[idx][idx2].feeTemplate.top / 100;
                    }
                    if (this.ratelist[idx][idx2].productCode == "unionpay.qrcode.face.d") {
                      this.ratelist[idx][idx2].feeTemplate.top = this.ratelist[idx][idx2].feeTemplate.top / 100;
                    }
                    if (this.ratelist[idx][idx2].productCode == "unionpay.qrcode.big.d") {
                          this.ratelist[idx][idx2].feeTemplate.top = this.ratelist[idx][idx2].feeTemplate.top / 100;
                    }
                  } else {
                    this.ratelist[idx][idx2].feeTemplate.amount = this.ratelist[idx][idx2].feeTemplate.amount / 100;
                  }
              
              }

            }
            // console.log(this.ratelist)
    },
   
    agentRateConversion() {
        
          for(let idx in this.ratelist){
            if(this.ratelist[idx].length == 1){
              if(idx == "D0"){
                if(this.ratelist[idx][0].feeTemplate.rate < 0){
                  this.$message.info("D0垫资费率超过限制");
                  return false;
                }
                
                   if(this.ratelist[idx][0].feeTemplate.amount < 0){
                    this.$message.info("D0单笔费率超过限制");
                    return false;
                   }
                
              }else{
                   if(this.ratelist[idx][0].feeTemplate.rate < 0){
                    this.$message.info(idx + "费率超过限制");
                    return false;
                   }
                
                if(this.ratelist[idx][0].name == "pos借记"){
                   if(this.ratelist[idx][0].feeTemplate.top < 0 || this.ratelist[idx][0].feeTemplate.top == 0){
                    this.$message.info(idx + "费率超过限制");
                    return false;
                   }
                }
                
               
              }
              
            }else{
                for(let idx2 in this.ratelist[idx]){
                      if(this.ratelist[idx][idx2].feeTemplate.rate < 0){
                        this.$message.info(this.ratelist[idx][idx2].productName + "费率超过限制");
                        return false;
                      }
                    if(this.ratelist[idx][idx2].feeTemplate.top){
                      if(this.ratelist[idx][idx2].feeTemplate.top < 0){
                        this.$message.info(this.ratelist[idx][idx2].productName + "费率超过限制");
                        return false;
                      }
                    }
                  
              }
            }
            
        }

          let feeAddRequestList = [];
          for(let Chargeidx in this.ratelist){
            let data = {
                feeTemplateId: "",
                feeTemplate: ""
            }
              if(this.ratelist[Chargeidx].length == 1){
                
                  data.feeTemplateId = this.ratelist[Chargeidx][0].id

                if(Chargeidx == "D0"){

                  data.feeTemplate =  
                  '{"rate":' +
                    Math.round(this.ratelist[Chargeidx][0].feeTemplate.rate * 10000) / 1000000 +
                    ',"amount":' +
                    Math.round(this.ratelist[Chargeidx][0].feeTemplate.amount * 100) +
                    ',"settle_percent":' +
                    this.ratelist[Chargeidx][0].feeTemplate.settle_percent +
                    "}";
                  
                }else if(Chargeidx == "pos借记"){
                  data.feeTemplate = '{"rate":' +
                  Math.round(this.ratelist[Chargeidx][0].feeTemplate.rate * 10000) / 1000000 +
                  ',"top":' + 
                  Math.round(this.ratelist[Chargeidx][0].feeTemplate.top * 100) +
                  "}";
                }else{
                  data.feeTemplate = '{"rate":' +
                  Math.round(this.ratelist[Chargeidx][0].feeTemplate.rate * 10000) / 1000000 +
                  "}";
                }
                 
                   feeAddRequestList.push(data)
              }else{
                   
                for(let Chargeidx2 in this.ratelist[Chargeidx]){
                        let exdata = {
                          feeTemplateId:this.ratelist[Chargeidx][Chargeidx2].id,
                          feeTemplate : ""
                        }
                          if(this.ratelist[Chargeidx][Chargeidx2].productCode == "unionpay.qrcode.face.d"){
                            exdata.feeTemplate =  '{"rate":' +
                            Math.round(this.ratelist[Chargeidx][Chargeidx2].feeTemplate.rate * 10000) / 1000000 +
                            ',"top":' + 
                            Math.round(this.ratelist[Chargeidx][Chargeidx2].feeTemplate.top * 100) +
                            "}";
                          }else if(this.ratelist[Chargeidx][Chargeidx2].productCode == "unionpay.qrcode.big.d"){
                            exdata.feeTemplate =  '{"rate":' +
                            Math.round(this.ratelist[Chargeidx][Chargeidx2].feeTemplate.rate * 10000) / 1000000 +
                            ',"top":' + 
                            Math.round(this.ratelist[Chargeidx][Chargeidx2].feeTemplate.top * 100) +
                            "}";
                          }else{
                            exdata.feeTemplate =  '{"rate":' +
                            Math.round(this.ratelist[Chargeidx][Chargeidx2].feeTemplate.rate * 10000) / 1000000 +
                            "}";
                          }
                        feeAddRequestList.push(exdata)
                      
                    
                }
              }

          }

         
          this.feeTemplateList = feeAddRequestList
        },
   
        agentRateUpDataConversion() {
       
          for(let idx in this.ratelist){
            if(this.ratelist[idx].length == 1){
              if(idx == "D0"){
                if(this.ratelist[idx][0].feeTemplate.rate < 0){
                  this.$message.info("D0垫资费率超过限制");
                  return false;
                }
                
                   if(this.ratelist[idx][0].feeTemplate.amount < 0){
                    this.$message.info("D0单笔费率超过限制");
                    return false;
                   }
                
              }else{
                   if(this.ratelist[idx][0].feeTemplate.rate < 0){
                    this.$message.info(idx + "费率超过限制");
                    return false;
                   }
                
                if(this.ratelist[idx][0].name == "pos借记"){
                   if(this.ratelist[idx][0].feeTemplate.top < 0 || this.ratelist[idx][0].feeTemplate.top == 0){
                    this.$message.info(idx + "费率超过限制");
                    return false;
                   }
                }
                
               
              }
              
            }else{
                for(let idx2 in this.ratelist[idx]){
                      if(this.ratelist[idx][idx2].feeTemplate.rate < 0){
                        this.$message.info(this.ratelist[idx][idx2].productName + "费率超过限制");
                        return false;
                      }
                    if(this.ratelist[idx][idx2].feeTemplate.top){
                      if(this.ratelist[idx][idx2].feeTemplate.top < 0){
                        this.$message.info(this.ratelist[idx][idx2].productName + "费率超过限制");
                        return false;
                      }
                    }
                  
              }
            }
            
        }

          let feeAddRequestList = [];
          for(let Chargeidx in this.ratelist){
            let data = {
                id: "",
                feeTemplate: ""
            }
              if(this.ratelist[Chargeidx].length == 1){
                
                  data.id = this.ratelist[Chargeidx][0].id

                if(Chargeidx == "D0"){

                  data.feeTemplate =  
                  '{"rate":' +
                    Math.round(this.ratelist[Chargeidx][0].feeTemplate.rate * 10000) / 1000000 +
                    ',"amount":' +
                    Math.round(this.ratelist[Chargeidx][0].feeTemplate.amount * 100) +
                    ',"settle_percent":' +
                    this.ratelist[Chargeidx][0].feeTemplate.settle_percent +
                    "}";
                  
                }else if(Chargeidx == "pos借记"){
                  data.feeTemplate = '{"rate":' +
                  Math.round(this.ratelist[Chargeidx][0].feeTemplate.rate * 10000) / 1000000 +
                  ',"top":' + 
                  Math.round(this.ratelist[Chargeidx][0].feeTemplate.top * 100) +
                  "}";
                }else{
                  data.feeTemplate = '{"rate":' +
                  Math.round(this.ratelist[Chargeidx][0].feeTemplate.rate * 10000) / 1000000 +
                  "}";
                }
                 
                   feeAddRequestList.push(data)
              }else{
                   
                for(let Chargeidx2 in this.ratelist[Chargeidx]){
                        let exdata = {
                          id:this.ratelist[Chargeidx][Chargeidx2].id,
                          feeTemplate : ""
                        }
                          if(this.ratelist[Chargeidx][Chargeidx2].productCode == "unionpay.qrcode.face.d"){
                            exdata.feeTemplate =  '{"rate":' +
                            Math.round(this.ratelist[Chargeidx][Chargeidx2].feeTemplate.rate * 10000) / 1000000 +
                            ',"top":' + 
                            Math.round(this.ratelist[Chargeidx][Chargeidx2].feeTemplate.top * 100) +
                            "}";
                          }else if(this.ratelist[Chargeidx][Chargeidx2].productCode == "unionpay.qrcode.big.d"){
                            exdata.feeTemplate =  '{"rate":' +
                            Math.round(this.ratelist[Chargeidx][Chargeidx2].feeTemplate.rate * 10000) / 1000000 +
                            ',"top":' + 
                            Math.round(this.ratelist[Chargeidx][Chargeidx2].feeTemplate.top * 100) +
                            "}";
                          }else{
                            exdata.feeTemplate =  '{"rate":' +
                            Math.round(this.ratelist[Chargeidx][Chargeidx2].feeTemplate.rate * 10000) / 1000000 +
                            "}";
                          }
                        feeAddRequestList.push(exdata)
                      
                    
                }
              }

          }

         
          this.feeTemplateList = feeAddRequestList
        }
  }
};
</script>
<style lang="less" scoped>
/deep/.noExpand {
  .ant-table-row-expand-icon {
    display: none;
  }
}
.rateTable {
   border-bottom: 1px solid #cccccc; 
   padding: 20px 0
}
.rateQuery {
  overflow: scroll;
  height: 100%;
  /* padding: 30px; */
  overflow-x: hidden;
  overflow-y: auto;
}
/*滚动条样式*/
.rateQuery::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}

.rateQuery::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

.rateQuery::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
.ratebutton {
  text-align: center;
}
</style>
